import { ScrollView, View } from "@tarojs/components";
import React, { useState } from "react";
import { useLoad } from "@tarojs/taro";
import { selectSectorPage } from "@/api";
import { ResponseListType } from "@/types/response";
import { ClosedEye, EyeOutlined, LocationOutlined } from "@taroify/icons";

import BarCard from "./BarCardName1";

interface BarListProps {
  title?: string;
  type?: "all" | "my";
  icon?: React.ReactNode;
  imgSize?: number;
  extra?: React.ReactNode;
}

export default ({
  title = "我的吧",
  icon = <LocationOutlined size={20} color="#000" />,
  imgSize = 60,
  extra,
}: BarListProps) => {
  const [bars, setBars] = useState<Array<any>>([]);
  const [show, setShow] = useState(true);
  useLoad(() => {
    selectSectorPage({ checkFlag: "1", pageNum: 1, pageSize: 1000 }).then(
      (res: ResponseListType) => {
        setBars(res.records);
      }
    );
  });
  return (
    <View className=" bg-white rounded-xl">
      <View className="flex justify-between items-center mb-1">
        <View className="flex gap-1 items-center font-bold">
          {icon}
          {title}
        </View>
        {extra ? (
          extra
        ) : (
          <View
            className="flex items-center gap-1"
            onClick={() => setShow(!show)}
          >
            {show ? <EyeOutlined /> : <ClosedEye />}
            <View className="text-xs text-gray-400">
              {show ? "隐藏" : "显示"}
            </View>
          </View>
        )}
      </View>
      {show && (
        <ScrollView scrollX className="overflow-x-auto  whitespace-nowrap">
          {bars.map((item) => (
            <BarCard key={item.kid} size={imgSize} {...item} />
          ))}
        </ScrollView>
      )}
    </View>
  );
};
